<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 容器样式，将页面分为三个区域 */
        .container {
            display: flex;
            width: 100%;
            height: 100vh;
        }
        .section {
            flex: 1;
            border: 1px solid black;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .box {
            display: flex;
            width: 400px;
            height: 400px;
            background-color: whitesmoke;
            align-items: flex-end;
            justify-content: space-around;
            margin: 0 auto; /* 居中显示 */
            position: relative; /* 为定位子元素做准备 */
        }
        .box-title {
            position: absolute;
            top: 0;
            left: 0;
            margin: 10px;
            font-size: 16px;
            font-weight: bold;
        }
        .bar {
            background-color: rgb(76, 157, 71);
            width: 20px;
            position: relative; /* 为标签定位做准备 */
        }
        .bar-label {
            position: absolute;
            top: -30px; /* 调整标签到柱子顶部上方 30px */
            left: 50%;
            transform: translateX(-50%); /* 水平居中 */
            font-size: 10px;
            background-color: white;
            padding: 2px 4px;
            border: 1px solid gray;
            border-radius: 3px;
        }
        /* 新增橙色柱子样式 */
        .government-bar {
            background-color: orange;
            width: 50px;
            height: 400px;
            position: relative;
        }
        /* 新增红色柱子样式 */
        .enterprise-bar {
            background-color: red;
            width: 50px;
            height: 300px;
            position: relative;
        }
        .finance-bar {
            background-color: rgb(132, 132, 243);
            width: 50px;
            height: 200px;
            position: relative;
        }
    </style>
    <script>
        'use strict';
        // 生成随机整数的函数
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>
</head>
<body>
    <h1>长期增长空间图</h1>
    <h2>字符串的不可变性</h2>
    <!-- 容器元素 -->
    <div class="container">
        <div class="section"></div>
        
        <div class="section">
            <div class="box">
                <div class="box-title">可支配收入</div>
                <!-- 动态生成柱子 -->
            </div>
        </div>
        
        <div class="section"></div>
    </div>
    <script>
        const box = document.querySelector('.box');
        const arr_income = [7, 20, 34, 44, 54, 66, 80, 103, 140, 400]
        const arr_income_text = []
        for (let i = 0; i < 10; i++) {
            const bar = document.createElement('div');
            bar.classList.add('bar');
            bar.style.height = `${arr_income[i]}px`;
            const label = document.createElement('div');
            label.classList.add('bar-label');
            label.textContent = arr_income[i];
            bar.appendChild(label);
            box.appendChild(bar);
        }

        const governmentBar = document.createElement('div');
        governmentBar.classList.add('government-bar');
        const governmentLabel = document.createElement('div');
        governmentLabel.classList.add('bar-label');
        governmentLabel.textContent = '政府';
        governmentBar.appendChild(governmentLabel);
        box.appendChild(governmentBar);

        const enterpriseBar = document.createElement('div');
        enterpriseBar.classList.add('enterprise-bar');
        const enterpriseLabel = document.createElement('div');
        enterpriseLabel.classList.add('bar-label');
        enterpriseLabel.textContent = '企业';
        enterpriseBar.appendChild(enterpriseLabel);
        box.appendChild(enterpriseBar);

        const financeBar = document.createElement('div');
        financeBar.classList.add('finance-bar');
        const financeLabel = document.createElement('div');
        financeLabel.classList.add('bar-label');
        financeLabel.textContent = '金融';
        financeBar.appendChild(financeLabel);
        box.appendChild(financeBar);
    </script>
</body>
</html>